<template>
	<view>
		密保问题
		<uv-form labelPosition="left" :model="sectiryQuestion" ref="questionForm">
			<uv-form-item label="问题" prop="question" borderBottom @click="showQuestionSelect">
				<uv-input v-model="sectiryQuestion.question" disabled disabledColor="#ffffff" placeholder="请选择密保问题"
					border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="答案" prop="answer" borderBottom>
				<uv-input v-model="sectiryQuestion.answer" border="none">
				</uv-input>
			</uv-form-item>
			<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
			<uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button>

		</uv-form>
		<uv-text type="primary" text="跳过" @click="jump"></uv-text>
		<uv-action-sheet ref="questionSelectRef" :actions="actions" title="请选择密保问题" @select="questionSelect">
		</uv-action-sheet>
	</view>
</template>

<script setup>
	import { addSecurityQuestionApi } from '@/api/securityQuestion.js'

	const router = useRouter()

	const questionFormRef = ref(null)
	const questionSelectRef = ref(null)

	const sectiryQuestion = ref({
		question: '',
		answer: ''
	})

	const actions = ref([{
		name: '男',
	}, {
		name: '女',
	}])

	// 重置
	const reset = () => {
		console.log(questionFormRef.value)
		questionFormRef.value.resetFields();
		// questionFormRef.value.clearValidate();
	}

	// 密保问题选择
	const showQuestionSelect = () => {
		questionSelectRef.value.open();
	}

	// 密保问题选择返回结果
	const questionSelect = (e) => {
		console.log(e)
		sectiryQuestion.value.question = e.name
	}

	const submit = async () => {
		console.log('提交')
		const res = await addSecurityQuestionApi(sectiryQuestion.value)
		if (res.code === 0) {
			uni.showToast({
				icon: "none",
				mask: true,
				title: '提交成功'
			})
			setTimeout(() => {
				router.replace("/pages/index/index");
			}, 1500)
		}
		console.log(res)
	}

	const jump = () => {
		console.log('跳过')
		router.replace("/pages/index/index");
	}
</script>

<style>

</style>